<template>
  <div class="alert-container " title="点击展开，查看更多通知"
       style="touch-action: pan-y;" v-on:click="this.toggleNotify">
    <a class="summary-panel" role="button" aria-controls="disruption-messages">
      <i class="fa fa-angle-down  travel-alert-trigger" style="font-size: 1.2em" v-show="!isCollapse"></i>
      <i class="fa fa-angle-up  travel-alert-trigger" style="font-size: 1.2em" v-show="isCollapse"></i>
      <div class="caption"><i class="fa fa-exclamation-triangle" aria-hidden="true"
                              style="color: #fed700; padding-top: 0.5em;"></i>
        4 项通知
      </div>
      <div class="timestamp" v-show="!isCollapse">
        <span class="datetime">6月13日 9:45</span> 北京时间 (GMT+8)
      </div>
    </a>
    <ul id="disruption-messages" class="message-items" aria-expanded="false" v-show="isCollapse">
      <li>
        <div class="msg-item">
          <i class="icon icon-travel-alert-contrary medium" aria-hidden="true" lang="en"></i>
          <div class="caption"><a href="#">热带气旋苗柏影响东南亚游艇租赁游 </a></div>
          <div class="timestamp"><span class="datetime">6月13日 9:45</span> 北京时间 (GMT+8)</div>
        </div>
      </li>
      <li>
        <div class="msg-item">
          <i class="icon icon-travel-alert-contrary medium" aria-hidden="true" lang="en"></i>
          <div class="caption"><a href="#">美英禁止部分国家航班乘客随身携带大型电子设备</a></div>
          <div class="timestamp"><span class="datetime">3月28日 16:00</span> HKT (GMT+8)</div>
        </div>
      </li>
      <li>
        <div class="msg-item">
          <i class="icon icon-travel-alert-contrary medium" aria-hidden="true" lang="en"></i>
          <div class="caption"><a href="#">前往以色列的旅客须知</a></div>
          <div class="timestamp"><span class="datetime">3月16日 10:15</span> HKT (GMT+8)</div>
        </div>
      </li>
      <li>
        <div class="msg-item">
          <i class="icon icon-travel-alert-contrary medium" aria-hidden="true" lang="en"></i>
          <div class="caption"><a href="#">上海浦东国际机场 (PVG) 及虹桥国际机场航班调整 </a></div>
          <div class="timestamp"><span class="datetime">3月7日 14:00</span> 北京时间 (GMT+8)</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'notification-bar',
    data: function () {
      return {isCollapse: false}
    },
    methods: {
      toggleNotify () {
        this.isCollapse ? this.isCollapse = false : this.isCollapse = true
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .alert-container {
    background-color: #ebedec;
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
    touch-action: pan-y;
  }

  .alert-container .summary-panel {
    margin: 0 auto;
    padding: 0.1em 0;
    position: relative;
    display: block;
    height: 2em;
  }

  .alert-container .summary-panel a{
    color: #0f748f;
    text-decoration: none;
  }

  .alert-container .medium, .travel-alert-container .high {
    background-color: #4c4c4c;
    color: #fed700;
    float: left;
    font-size: 2.05em;
    margin: 0.06em 0.5em 0 0;
  }

  .alert-container .caption {
    color: #0f748f;
    font-size: 0.875em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .alert-container .summary-panel .timestamp {
    display: block;
    position: absolute;
    right: 40px;
    top: 0.05em;
    margin: 0.6em 0 0 2em;
    color: #4c4c4c;
    font-size: 0.85em;
  }

  .alert-container .summary-panel .travel-alert-trigger {
    background-color: #ebedec;
    color: #0f748f;
    font-size: 7px;
    position: absolute;
    right: 12px;
    top: 40%;
  }

  .alert-container .message-items li::before {
    content: none;
  }

  ul > li::before {
    color: #8e8573;
    font-size: 1.385em;
    left: 0;
    position: absolute;
    top: -4px;
  }

  .alert-container .message-items li {
    border-top: 1px solid #fff;
    padding: 0;
  }

  .alert-container .message-items li .msg-item {
    margin: 0 auto;
    width: 960px;
    height: 2em;
    display: flex;
    align-items: center;
    padding: 0.1em 0;
    position: relative;
  }

  .alert-container .caption {
    color: #0f748f;
    font-size: 0.875em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .alert-container .caption a{
    color: #0f748f;
    text-decoration: none;
  }

  .alert-container .message-items li .msg-item::before, .travel-alert-container .message-items li .msg-item::after {
    content: " ";
    display: table;
  }

  .alert-container .message-items li .msg-item::after {
    clear: both;
  }

  .alert-container .message-items li .msg-item::before, .travel-alert-container .message-items li .msg-item::after {
    content: " ";
    display: table;
  }

  .alert-container .message-items li .msg-item .caption {
    width: 60%;
  }

  .alert-container .message-items li .msg-item .timestamp {
    font-size: 0.875em;
    left: auto;
    right: 0;
    top: 0.2em;
    position: absolute;
  }


</style>
